<template>
  <el-config-provider>
    <el-container class="app-container">
      <el-header v-if="shouldShowHeader" class="app-header">
        <div class="logo">
          LTT-Cloud
        </div>
        <el-menu mode="horizontal" :router="true" class="nav-menu">
          <el-menu-item index="/">Home</el-menu-item>
          <el-menu-item index="/dict/type">Dictionary</el-menu-item>
        </el-menu>
        <div class="user-info">
          <span v-if="user">Welcome, {{ user.nickname }}</span>
          <el-button v-if="user" type="primary" @click="handleLogout" text>Logout</el-button>
        </div>
      </el-header>
      <el-main>
        <NuxtPage />
      </el-main>
    </el-container>
  </el-config-provider>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue';
import { useAuth } from '~/composables/useAuth';

const { user, logout, checkAuth } = useAuth();
const route = useRoute();

const shouldShowHeader = computed(() => {
  return route.path !== '/login' && route.path !== '/register';
});

const handleLogout = async () => {
  await logout();
};

onMounted(() => {
  checkAuth();
});
</script>

<style>
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.app-container {
  height: 100vh;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.nav-menu {
  border-bottom: none;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
</style>
